<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search, Filter, ArrowDown, Edit } from '@element-plus/icons-vue'

// 收款流水列表列数据
const columns = [
    { title: '付款账户名', key: 'payerName', sortable: true },
    { title: '付款账号', key: 'payerAccount', sortable: true },
    { title: '到账时间', key: 'arrivalTime', sortable: true },
    { title: '到账金额', key: 'amount', sortable: true },
    { title: '收款账户', key: 'payeeAccount', sortable: true },
    { title: '待认领金额', key: 'unclaimedAmount', sortable: true },
    { title: '认领状态', key: 'claimStatus', sortable: true, filterable: true },
    { title: '转账备注', key: 'remark', sortable: true },
    { title: '流水编号', key: 'lsbh', sortable: true },
    { title: '创建人', key: 'cjr', sortable: true },
    { title: '创建时间', key: 'cjsj', sortable: true },

];

const mockData = ref([]);
const loading = ref(true);
const activeName = ref('claimable'); // 默认选中"可认领"
const totalAmount = ref('0.00'); // 总到账金额
const claimedAmount = ref('0.00'); // 已认领金额
const claimableAmount = ref('0.00'); // 可认领金额

// 筛选表单数据
const filterForm = ref({
    payeeAccount: '',
    arrivalTimeRange: [],
    creator: '',
    createTimeRange: []
});

// 搜索关键词
const searchKeyword = ref('');

// 处理标签页切换
const handleTabChange = (tabKey) => {
    loading.value = true;
    activeName.value = tabKey;

    setTimeout(() => {
        // 按标签页加载对应数据
        switch (tabKey) {
            case 'claimable':
                mockData.value = [
                    {
                        id: '1',
                        payerName: '张三',
                        payerAccount: '6222****1234',
                        arrivalTime: '2023-10-15 09:30:00',
                        amount: 5000,
                        payeeAccount: '公司基本户',
                        unclaimedAmount: 5000,
                        claimStatus: '未认领',
                        remark: '服务费'
                    },
                    {
                        id: '2',
                        payerName: '李四',
                        payerAccount: '6222****5678',
                        arrivalTime: '2023-10-14 14:20:00',
                        amount: 12000,
                        payeeAccount: '公司一般户',
                        unclaimedAmount: 12000,
                        claimStatus: '未认领',
                        remark: '项目预付款'
                    }
                ];
                break;
            case 'claimed':
                mockData.value = [
                    {
                        id: '3',
                        payerName: '王五',
                        payerAccount: '6222****9012',
                        arrivalTime: '2023-10-13 11:45:00',
                        amount: 8000,
                        payeeAccount: '公司基本户',
                        unclaimedAmount: 0,
                        claimStatus: '已认领',
                        remark: '货款'
                    }
                ];
                break;
        }

        // 计算金额统计
        calculateAmountStatistics();
        loading.value = false;
    }, 500);
};

// 计算金额统计
const calculateAmountStatistics = () => {
    const total = mockData.value.reduce((sum, item) => sum + item.amount, 0);
    const claimed = mockData.value.reduce((sum, item) =>
        sum + (item.claimStatus === '已认领' ? item.amount : 0), 0);
    const claimable = total - claimed;

    totalAmount.value = total.toFixed(2);
    claimedAmount.value = claimed.toFixed(2);
    claimableAmount.value = claimable.toFixed(2);
};

// 筛选表单提交
const handleFilterSubmit = () => {
    loading.value = true;
    setTimeout(() => {
        // 这里添加实际筛选逻辑
        const filtered = [...mockData.value].filter(item => {
            // 收款账户筛选
            if (filterForm.value.payeeAccount && !item.payeeAccount.includes(filterForm.value.payeeAccount)) return false;
            // 创建人筛选
            if (filterForm.value.creator && !item.creator?.includes(filterForm.value.creator)) return false;
            return true;
        });

        mockData.value = filtered;
        calculateAmountStatistics();
        loading.value = false;
    }, 500);
};

// 重置筛选表单
const resetFilterForm = () => {
    filterForm.value = {
        payeeAccount: '',
        arrivalTimeRange: [],
        creator: '',
        createTimeRange: []
    };
    // 重新加载当前标签页数据
    handleTabChange(activeName.value);
};

// 搜索功能
const handleSearch = () => {
    if (!searchKeyword.value) {
        // 搜索为空时重新加载当前标签页数据
        handleTabChange(activeName.value);
        return;
    }

    loading.value = true;
    setTimeout(() => {
        const keyword = searchKeyword.value.toLowerCase();
        const filtered = mockData.value.filter(item => {
            return item.payerName.toLowerCase().includes(keyword) ||
                item.payerAccount.toLowerCase().includes(keyword) ||
                item.id.toLowerCase().includes(keyword);
        });
        mockData.value = filtered;
        calculateAmountStatistics();
        loading.value = false;
    }, 500);
};

// 页面挂载时加载初始数据
onMounted(() => {
    handleTabChange('claimable');
});
</script>

<template>
    <div class="receipt-management">
        <!-- 顶部筛选区域 -->
        <div class="top-filter">
            <div class="top-filter-left">
                <!-- 筛选弹窗 -->
                <stick-popup>
                    <template #show>
                        <div class="filter-btn">
                            <div class="filter-btn-label">筛选</div>
                            <div class="filter-btn-icon">
                                <Filter />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="filter-form-container">
                            <el-form :model="filterForm" label-width="100px">
                                <!-- 收款账户 -->
                                <el-form-item label="收款账户">
                                    <el-input v-model="filterForm.payeeAccount" placeholder="搜索收款账户" />
                                </el-form-item>

                                <!-- 到账时间 -->
                                <el-form-item label="到账时间">
                                    <el-date-picker v-model="filterForm.arrivalTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 创建人 -->
                                <el-form-item label="创建人">
                                    <el-input v-model="filterForm.creator" placeholder="搜索创建人" />
                                </el-form-item>

                                <!-- 创建时间 -->
                                <el-form-item label="创建时间">
                                    <el-date-picker v-model="filterForm.createTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="filter-actions">
                            <el-button type="text" @click="resetFilterForm">重置</el-button>
                            <el-button type="primary" @click="handleFilterSubmit">确认</el-button>
                        </div>
                    </template>
                </stick-popup>

                <!-- 搜索框 -->
                <div class="search-box">
                    <el-input v-model="searchKeyword" placeholder="流水编号/付款账户名/付款账号" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="top-filter-right">
                <el-button type="primary">
                    导入收费流水
                    <ArrowDown class="btn-icon" />
                </el-button>
                <el-button type="primary">导出</el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <!-- 状态标签页和金额统计 -->
            <div class="status-tabs">
                <el-tabs v-model="activeName" @tab-click="(tab) => handleTabChange(tab.name)" stretch>
                    <el-tab-pane label="可认领" name="claimable"></el-tab-pane>
                    <el-tab-pane label="已认领" name="claimed"></el-tab-pane>
                </el-tabs>

                <!-- 金额统计信息 -->
                <div class="amount-stats">
                    总到账金额：{{ totalAmount }}
                    已认领：{{ claimedAmount }}
                    可认领：{{ claimableAmount }}
                </div>
            </div>

            <!-- 收款流水表格 -->
            <div class="receipt-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :show-selection="true">
                    <!-- 金额格式化 -->
                    <template #data-amount="scope">
                        ¥{{ scope.data.amount.toFixed(2) }}
                    </template>

                    <template #data-unclaimedAmount="scope">
                        ¥{{ scope.data.unclaimedAmount.toFixed(2) }}
                    </template>

                    <!-- 操作列 -->
                    <template #data-operation="scope">
                        <el-button type="text" size="small" :icon="Edit" title="编辑"></el-button>
                    </template>
                </my-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.receipt-management {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-bottom: 20px;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;

    .top-filter-left {
        display: flex;
        align-items: center;
        gap: 15px;

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 15px;
            height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
        }

        .search-box {
            width: 300px;
        }
    }

    .top-filter-right {
        display: flex;
        gap: 10px;

        .btn-icon {
            margin-left: 5px;
            font-size: 14px;
        }
    }
}

.table-container {
    width: calc(100% - 40px);
    margin: 20px auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;

    .status-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .amount-stats {
            color: #606266;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            gap: 15px;
        }
    }

    .receipt-table {
        width: 100%;
        overflow-x: auto;
    }
}

.filter-form-container {
    padding: 15px;
    width: 400px;

    .el-form-item {
        margin-bottom: 15px;
    }
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}
</style>